import { Form, Button, Input, message } from 'antd';
import { useEffect, useState } from 'react';
import { addUser } from 'api/user';
import { UserOutlined, LockOutlined, CloseCircleOutlined } from '@ant-design/icons';
import md5 from 'js-md5';

export default function () {
	const [options, setoptions] = useState([]);
	const [loading, setLoading] = useState<boolean>(false);

	const [form] = Form.useForm();

	useEffect(() => {}, []);

	const onFinish = async (values: any) => {
		let { account, password, nickname, surepassword } = values;
		if (surepassword !== password) return message.error('两次输入的密码不一致');
		password = md5(password);
		await addUser({ account, password, nickname });
		message.success('注册成功');
		form.resetFields();
	};

	return (
		<div className=' w-96 mx-auto'>
			<Form
				form={form}
				name='basic'
				labelCol={{ span: 5 }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				size='large'
				autoComplete='off'>
				<Form.Item name='nickname'>
					<Input placeholder='用户名' />
				</Form.Item>
				<Form.Item name='account' rules={[{ pattern: /^[a-zA-Z0-9]{6,16}$/, message: '限制为：6-16，位数字或字母！' }]}>
					<Input placeholder='账号' prefix={<UserOutlined />} />
				</Form.Item>
				<Form.Item
					name='password'
					rules={[
						{
							pattern: /^(?=.*[0-9])(?=.*[a-zA-Z~!@#$%^&*._?\x20])[0-9A-Za-z~!@#$%^&*._?\x20]{8,16}$/,
							message: '8-16位，包含数字和字母或特殊字符',
						},
					]}>
					<Input.Password autoComplete='new-password' placeholder='密码' prefix={<LockOutlined />} />
				</Form.Item>
				<Form.Item name='surepassword' rules={[{ required: true, message: '请再次输入密码' }]}>
					<Input.Password autoComplete='new-password' placeholder='确认密码' prefix={<LockOutlined />} />
				</Form.Item>
				<Form.Item>
					<Button
						onClick={() => {
							form.resetFields();
						}}
						icon={<CloseCircleOutlined />}>
						重置
					</Button>
					<Button className=' ml-4' type='primary' htmlType='submit' loading={loading} icon={<UserOutlined />}>
						提交
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
}
